<template>
  <f7-page>
    <f7-navbar :title="$t('m.cu1')" back-link=" "></f7-navbar>
    <div class="content-padding">
      <div class="contact-item van-hairline--bottom">
        <div>
          <div>
            <i class="iconfont icon-mn_fasong_fill"></i>
          </div>
          <div>
            <p>{{$t('m.cu2')}}</p>
            <p>{{config.kefu1}}</p>
          </div>
        </div>
        <f7-button fill color="blue" @click="copyEmail(config.kefu1)">{{$t('m.copy')}}</f7-button>
      </div>
      <!--<div class="contact-item">
        <div>
          <div>
            <i class="iconfont icon-mn_fasong_fill"></i>
          </div>
          <div>
            <p>c2c{{$t('m.cu2')}}</p>
            <p>{{config.kefu2}}</p>
          </div>
        </div>
        <f7-button fill color="blue" @click="copyEmail('c2c@bitdfund.com')">{{$t('m.copy')}}</f7-button>
      </div>
      <div class="contact-item">
        <div>
          <div>
            <i class="iconfont icon-mn_fasong_fill"></i>
          </div>
          <div>
            <p>{{$t('m.cu3')}}</p>
            <p>cj1992728</p>
          </div>
        </div>
        <img :src="config.kefu3" alt="" style="width: 50px">
      </div>-->
    </div>
  </f7-page>
</template>

<script>
  export default {
    name: "contact-us",
    computed: {
      config() {
        return this.$store.getters.config.config;
      }
    },
    methods: {
      copyEmail (msg) {
        this.$copyText(msg).then( (e) => {
          this.$toast(this.$t('m.copySuccess'));
        }, function (e) {
          console.log(e)
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .content-padding {
    margin-top: $padding20;
  }
  .contact-item {
    display: flex;
    justify-content: space-between;
    background: #fff;
    padding: $padding;
    align-items: center;
    > div {
      display: flex;
      align-items: center;
      div{
        &:first-child {
          width: 80px;
          height: 80px;
          border-radius: 50%;
          background: #f1d62f;
          text-align: center;
          line-height: 80px;
          margin-right: $padding20;
          .iconfont {
            font-size: 40px;
            color: #fff;
          }
        }
        p {
          &:last-child {
            color: $colorGrey;
          }
        }
      }
    }
  }
</style>
